<template>
  <jl-base>

    <jl-header>
      <mt-header :title="title" :fixed="true">
        <i slot="left">
          <mt-button icon="back" @click="back"></mt-button>
        </i>
      </mt-header>
      <mt-navbar v-model="selected" class="mt35">
        <mt-tab-item id="base">基本信息</mt-tab-item>
        <mt-tab-item id="goods">商品信息</mt-tab-item>
      </mt-navbar>
    </jl-header>

    <jl-content style="height: calc(100% - 160px);!important; margin-top: 0;">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="base">
          <div>
            <div class="w12">
              <div class="dld_title"><span>工程类型</span></div>
              <div class="dld_body">
                <template v-for="item in GCLX">
                  <button :class="{'xuan':formData.GCLX.value == item.value}" v-on:click="choseType(item)">
                    {{item.value}}
                  </button>
                </template>
              </div>
            </div>
            <div class="w12">

              <template v-if="formData.jlbh && !CGX_SHOW">
                <div class="dld_title">
                  <span>跟进列表</span>
                </div>
                <div class="dld_body">
                  <jl-from-textarea placeholder="跟进备注"
                                    v-model="formData.GC_GJQK "/>
                </div>
              </template>

              <div class="dld_title">
                <span>使用单位</span>
              </div>
              <div class="dld_body">
                <jl-from-input label="用户姓名" v-model="formData.YHXM"/>
                <jl-from-input label="用户电话" required v-model="formData.YHDH"/>
                <jl-from-input label="单位名称" required v-model="formData.SYDW"/>
              </div>

              <div class="dld_title">
                <span>购买单位</span>
              </div>
              <div class="dld_body">
                <jl-from-input label="联系人" v-model="formData.LXR"/>
                <jl-from-input label="联系电话" v-model="formData.LXDH"/>
                <jl-from-input label="单位名称" required v-model="formData.GMDW"/>
                <jl-address v-model="formData.AZDZ1" label="地址"/>
                <jl-from-datepicker label="预计安装日期" required v-model="formData.YJAZRQ"/>
              </div>

              <div class="dld_title">
                <span>厂家资料</span>
              </div>
              <div class="dld_body">
                <jl-from-query label="经销商"
                               required
                               :text="formData.JXSMC"
                               type="query_bean"
                               sqlid="scm.ccgl.jhd.query.QueryWLDW_KHMC"
                               @ok="chooseJXS">
                  <div class='jl_form'>
                    <div class='jl_form_item bor_bottom'>
                      <span class='w04'>{WLDW01}</span>
                      <span class='w08 tr'>{WLDWMC}</span>
                      <span class='w12'>{LXDH}</span>
                      <i class='fa fa-angle-right'></i>
                    </div>
                  </div>
                </jl-from-query>
                <jl-from-input label="经销商电话" required disabled v-model="formData.JXSDH"/>
                <!--<jl-from-input label="二级经销商" disabled v-if="formData.GCLX.key == 2"/>
                <jl-from-input label="二级经销商电话" disabled v-if="formData.GCLX.key == 2"/>-->
                <jl-from-button label="厂家业务员" :text="formData.GCGZR" required @click="chooseGCGZR"/>
                <jl-from-input label="厂家业务员电话" v-model="formData.GZRDH"/>
                <jl-from-input label="经销商业务员" v-model="formData.JXRLXR"/>
                <jl-from-input label="经销商业务员电话" v-model="formData.JXSLXDH"/>
                <jl-from-button label="工程用途" :text="formData.GCYT.value" required @click="chooseEngineerPurpose"/>
                <jl-from-textarea required placeholder="请输入工程描述" v-model="formData.GCMS"/>
                <jl-from-input label="面积" required v-model="formData.MJ"/>
                <jl-from-input label="匹数" required v-model="formData.PS"/>
                <jl-from-select label="是否团购工程" default-key="0" :options="{'0':'否','1':'是'}" v-model="formData.SFTGGC"/>
              </div>
            </div>

            <template v-for="(item,index) in formData.AZDZLB">
              <div class="w12">
                <div class="dld_title">
                  <span>安装地址（{{index + 1}}）</span>
                  <i class="fa fa-trash font_color font_size_large fr" @click="delAddress(index)"></i>
                </div>
                <div class="dld_body">
                  <jl-from-input label="联系人" required placeholder="请输入安装地址联系人" v-model="item.LXR"/>
                  <jl-from-input label="联系电话" required placeholder="请输入安装地址联系人电话" v-model="item.LXDH"/>
                  <jl-address label="安装地址" required
                              v-model="item.AZDZ"
                  />
                </div>
              </div>
            </template>
            <div class="dld_add mt10" v-if="!formData.jlbh" @click="addAddress">+ 添加安装地址</div>
            <div class="dld_add mt10" v-if="formData.jlbh && CGX_SHOW" @click="addAddress">+ 添加安装地址</div>
          </div>
        </mt-tab-container-item>

        <mt-tab-container-item id="goods">
          <div>
            <template v-for="(item,index) in formData.SPLB">
              <div class="w12">
                <div class="dld_title"><span>商品信息({{index+1}})</span>
                  <i class="fa fa-trash font_color font_size_large fr" @click="removeGoods(index)"></i>
                </div>
                <div class="dld_body">
                  <div class="jl_form">
                    <div class="jl_form_item bor_bottom">
                      <span class="w04"><em class="font_red">*</em>商品名称</span>
                      <span class="w08 tr">{{item['GCSPMC']}}</span>
                      <i class="fa fa-search-plus"></i>
                    </div>
                  </div>
                  <div class="jl_input">
                    <div class="jl_input_item pr10 bor_bottom">
                      <span class="w08">
                        <em class="font_red">*</em>申请数量
                      </span>
                      <nut-stepper
                        :value.sync="item.SQSL"
                        :min="1"
                      ></nut-stepper>
                    </div>
                  </div>
                  <jl-from-textarea required placeholder="请输入商品备注信息" v-model="item.BZ"/>
                </div>
              </div>
            </template>
            <div class="dld_add mt10" v-if="!formData.jlbh" @click="SPLB_SHOW = true">+ 添加商品</div>
            <div class="dld_add mt10" v-if="formData.jlbh && CGX_SHOW" @click="SPLB_SHOW = true">+ 添加商品</div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>

      <!--控件区域-->
      <!--工程用途-->
      <jl-picker
        :is-visible="GCYT_SHOW"
        :list-data="[GCYT_LIST]"
        @confirm="callbackEngineerPurpose"
        @close="GCYT_SHOW = false"
      ></jl-picker>

      <!--厂家业务员-->
      <jl-picker
        :is-visible="GCGZR_SHOW"
        :list-data="[GCGZR_LIST]"
        :item-key="'GCGZR'"
        @confirm="callbackGCGZR"
        @close="GCGZR_SHOW = false"
      ></jl-picker>

      <!--选择商品-->
      <mt-popup style="height: 100%;width: 100%"
                v-model="SPLB_SHOW"
                position="right">
        <goods @close="SPLB_SHOW = false"
               @save="callGoods"
               :list="formData.SPLB"
               v-if="SPLB_SHOW"
               :GCBJ="GCBJ"/>
      </mt-popup>

    </jl-content>

    <jl-footer>
      <template v-if="selected == 'goods'">
        <div class="dld_title" style="background-color: #f1f1f1;"><span>合计：{{formData.SPLB.length}}件商品。</span></div>
      </template>
      <div class="footer_btn" v-if="!formData.jlbh">
        <button class="none" @click="draft">保存草稿</button>
        <button @click="save">提交</button>
      </div>
      <div class="footer_btn" v-if="formData.jlbh && CGX_SHOW">
        <button class="none" @click="draft">保存草稿</button>
        <button @click="save">提交</button>
      </div>
      <div class="footer_btn pr20 pl20" v-if="formData.jlbh && !CGX_SHOW">
        <button class="w12 ml0" @click="save">提交</button>
      </div>
    </jl-footer>
  </jl-base>
</template>

<script>


  import Goods from './StartGoods'

  export default {
    components: {Goods},
    data() {
      return {
        title: '工程登录单-制单',
        CHOSE_SHOW: false,
        GCLX: [{key: '1', value: '家用'},
          {key: '2', value: '商用'}],
        GCYT_SHOW: false,
        GCGZR_SHOW: false,
        SPLB_SHOW: false,
        GCGZR_LIST: [],
        GCYT_LIST: [],
        selected: 'base',
        CGX_SHOW: false,
        GCBJ: '1',
        drafts: false,
        formData: {
          GCLX: {key: '1', value: '家用'},
          DLD: {key: '0'},
          bdbh: '1042',
          jlbh: 0,
          PID: '',
          SK01: '',
          BZ01: '90401',
          YHXM: '',
          YHDH: '',
          SYDW: '',
          LXR: '',
          LXDH: '',
          GMDW: '',
          GCYT: {},
          GCGZR: '',
          GCGZRDM: '',
          SPLB: [],
          AZDZLB: [],
          GCMS: '',
          GZRDH: '',
          JXRLXR: '',
          JXSLXDH: '',
          YJAZRQ: '',
          MJ: '',
          PS: '',
          SFTGGC: {},
          AZDZ1: [],
          JXSMC: '',
          JXSDH: '',
          JXSGCBH: '',
          WLDW01: '',
          GC_GJQK: '',
          GCYT01: '0',
        }
      }
    },
    methods: {
      back() {
        this.$router.back();
      },
      // 点击打开工程用途选择窗口
      chooseEngineerPurpose() {
        this.$engineer.getGCYT({GCYT: this.formData.GCYT01}).then(v => {
          v = [...[{value: '请选择'}], ...v]
          v = $Utils.toLowerCase(v)
          this.GCYT_LIST = v
          this.GCYT_SHOW = true
        }).catch(e => {
        })
      },
      // 确定回调
      callbackEngineerPurpose(item) {
        if ($Utils.isNull(item[0])) return
        this.formData.GCYT = {key: item[0].key, value: item[0].value}
      },
      chooseGCGZR() {
        let userInfo = $Utils.getUserInfo();
        this.$engineer.getGCGZR({WLDW01: this.formData.WLDW01}).then(v => {
          v = [...[{GCGZR: '请选择'}], ...v]
          this.GCGZR_LIST = v
          this.GCGZR_SHOW = true
        }).catch(e => {
        })
      },
      callbackGCGZR(item) {
        if ($Utils.isNull(item[0])) return
        let GCGZR = item[0]
        this.formData.GCGZR = GCGZR['GCGZR']
        this.formData.GCGZRDM = GCGZR['GCGZRDM']
      },
      removeGoods(index) {
        this.formData.SPLB.splice(index, 1)
      },
      save() {
        $Utils.MessageBox.confirm('确定执行此操作?').then(action => {
          $Utils.loading()
          this.$engineer.startOrderSave(this.formData).then(v => {
            $Utils.hideloading()
            this.back()
          }).catch(e => {
            $Utils.hideloading()
          })
        }).catch(e => {
        })
      },
      callGoods(list) {
        Array.prototype.push.apply(this.formData.SPLB, list)
      },
      addAddress() {
        let params = {
          AZDZ: [],
          LXR: this.formData.YHXM,
          LXDH: this.formData.YHDH
        }
        this.formData.AZDZLB.push(params)
      },
      delAddress(index) {
        this.formData.AZDZLB.splice(index, 1)
      },
      chooseJXS(item) {
        this.formData.WLDW01 = item.WLDW01
        this.formData.JXSMC = item.WLDWMC
        this.formData.JXSDH = item.LXDH
        this.formData.JXSGCBH = item.CJBM
      },
      initData() {
        this.http.find('SCM_GCDLD', {
          bdbh: this.formData.bdbh,
          jlbh: this.formData.jlbh
        }).then(v => {
          if ($Utils.isNull(v)) return
          delete v[0]['BZ01']
          delete v[0]['_id']
          delete v[0]['PID']
          delete v[0]['SK01']
          /*if (this.drafts)
            v[0]['jlbh'] = 0*/
          Object.assign(this.formData, v[0])
        }).catch(e => console.log(e))
      },
      choseType(item) {
        if (this.CHOSE_SHOW) return;
        this.formData.GCYT = {};
        this.formData.GCLX = item;
        if (item.key == 2) {
          this.formData.BZ01 = '90931';
          this.formData.bdbh = '1096';
          this.formData.GCYT01 = '1';
          this.GCBJ = '2';
        } else {
          this.formData.BZ01 = '90401';
          this.formData.bdbh = '1042';
          this.formData.GCYT01 = '0';
          this.GCBJ = '1';
        }
      },
      draft() {
        $Utils.MessageBox.confirm('确定执行此操作?').then(v => {
          $Utils.loading()
          this.$engineer.startDraft(this.formData)
            .then(v => {
              $Utils.hideloading();
              this.back();
            })
            .catch(e => {
              $Utils.hideloading();
            })
        })
      }
    },
    watch: {
      'formData.YHXM': function (v) {
        this.formData.LXR = v
      },
      'formData.YHDH': function (v) {
        this.formData.LXDH = v
      },
      'formData.SYDW': function (v) {
        this.formData.GMDW = v
      },
      'formData.AZDZLB': function (n) {
        for (let i = 0; i < n.length; i++) {
          let v = n[i]
          if ($Utils.isNull(v['LXR'])) {
            v['LXR'] = this.formData.YHXM
          }
          if ($Utils.isNull(v['LXDH'])) {
            v['LXDH'] = this.formData.YHDH
          }
          if ($Utils.isNull(v['AZDZ'])) {
            let AZDZ = JSON.parse(JSON.stringify(this.formData.AZDZ1))
            v['AZDZ'] = AZDZ;
          }
        }
      }
    },
    created() {
      if (!$Utils.isNull(this.$route.query.jlbh)) {
        this.formData.jlbh = new Number(this.$route.query.jlbh)
        this.formData.bdbh = this.$route.query.bdbh
        this.formData.BZ01 = this.$route.query.BZ01
        this.formData.PID = this.$route.query.PID
        this.formData.SK01 = this.$route.query.SK01
        let DLD03 = this.$route.query.DLD03;
        this.CGX_SHOW = this.$route.query.GCX_SHOW || false;
        this.drafts = this.$route.query.drafts || false;
        let DLD31 = this.$route.query.DLD31;
        if (DLD03 == 1) {
          this.GCLX = [{key: '1', value: '家用'}];
        } else if (DLD03 == 2) {
          this.GCLX = [{key: '2', value: '商用'}];
          this.formData.GCLX = {key: '2', value: '商用'};
          if (this.drafts || DLD31 === 'N') {
            this.formData.BZ01 = '90931';
          } else {
            this.formData.BZ01 = '90934';
          }
          this.formData.bdbh = '1096';
          this.formData.GCYT01 = '1';
          this.GCBJ = '2';
        }
        this.CHOSE_SHOW = true;
        if (!this.CGX_SHOW) {
          this.title = '工程登录单-跟进';
        }

        this.initData()
      } else {
        this.http.query('scm.ccgl.jhd.query.QueryWLDW_KHMC')
          .then(v => {
            for (let i = 0; i < v.length; i++) {
              let item = v[0];
              this.chooseJXS(item);
              break;
            }
          })
      }
    },
  }
</script>

<style scoped>
</style>
